<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例">
    </meta>
    <title>mapv-webgl</title>
    <!-- 0 引入js文件 -->
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <script src="./scripts/jquery.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body>
    <div id="earthContainer" style="width: 100%; height: 100%; background: grey">
    </div>
    <script>
        function startup() {
            const earth = new XE.Earth('earthContainer');

            var viewer = earth.czm.viewer;
            viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
                url: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c', 'd', 'e'],
            }));
            // 设置相机位置
            // earth.camera.position.toString()和earth.camera.toAllJSONStr()这两个方法可获取相机位置
            earth.camera.position = [2.0321029947215896, 0.6960977535289034, 137213.2651419932];
            earth.camera.rotation = [6.195234718457592, -1.5386280819124152, 0];

            $.get('./scripts/beijing-village.json', function (data) {

                var dataSet = new mapv.DataSet(data);

                var options = {
                    fillStyle: 'rgba(255, 80, 53, 0.8)',
                    strokeStyle: 'rgba(250, 255, 53, 0.8)',
                    context: 'webgl',
                    size: 3,
                    lineWidth: 1,
                    draw: 'simple'
                }

                var mapvLayer = XE.mixins.mapVLayer(viewer, dataSet, options);
            });


            // only for Debug
            window.earth = earth;
        }

        // 1 XE.ready()会加载Cesium.js等其他资源，注意ready()返回一个Promise对象。
        XE.ready().then(() => XE.HTML.loadMapV()).then(startup);
    </script>
</body>

</html>